<template>
    <div class="football">
        <div class="container">
            <Accordion v-for="(itemp,pindex) in listsdata" :key="pindex">
                <p class="itemhead" slot="accheader"><img class="fronticon"
                                                          src="//common-1253410441.file.myqcloud.com/activityimg/20171225144941.png?v=1"
                                                          alt="">
                    <span>{{itemp.Data}}  {{itemp.WkName}}  共{{itemp.MatchCount}}场可以投注</span></p>
                <ul slot="accbody" class="listcon">
                    <li v-for="(itemc ,cindex) in itemp.Item" :key="cindex">
                        <div class="dleft">
                            <span>{{itemc.LeagueName}}</span>
                            <span>{{itemp.WkName}} {{itemc.MNo}}</span>
                            <span><strong>{{itemc.EndTime}}</strong>截止</span>
                        </div>
                        <div class="dright">
                    <span class="toptitle">
                        <b>
                            让球
                        </b>
                        <strong><i>[12]</i>{{itemc.HTeam}}</strong>
                        <em>vs</em>
                        <strong>{{itemc.VTeam}} <i>[11]</i></strong>
                    </span>
                            <div class="tabcon">
                        <span class="leftrang">
                            <b>0</b>
                            <b :class="itemc.rangqiu | setclass">{{itemc.rangqiu}}</b>
                        </span>
                                <table>
                                    <tbody>
                                    <tr :class="[itemc.showdatawin[0].isdan?'dan':'']">
                                        <template v-if="itemc.PSState.split(',')[0]==='1'">
                                            <td @click="tdclick(itemp,pindex,itemc,cindex,iteml,lindex)"
                                                v-for="(iteml,lindex) in itemc.showdatawin"
                                                :key="lindex"
                                                :class="[iteml.selected?'selected':'']">
                                                <strong>{{iteml.name}}</strong>
                                                <i>{{iteml.value}}</i>
                                            </td>
                                        </template>
                                        <template v-else>
                                            <td v-for="(item,index) in 3" :key="index">
                                                <strong>未开售</strong>
                                            </td>
                                        </template>
                                    </tr>
                                    <tr>
                                        <template v-if="itemc.PSState.split(',')[1]==='1'">
                                            <td v-for="(iteml,lindex) in itemc.showdatawinone"
                                                v-if="lindex<3"
                                                @click="tdclick(itemp,pindex,itemc,cindex,iteml,lindex)"
                                                :class="[iteml.selected?'selected':'']">
                                                <strong>{{iteml.name}}</strong>
                                                <i>{{iteml.value}}</i>
                                            </td>
                                        </template>
                                        <template v-else>
                                            <td v-for="(item,index) in 3" :key="index">
                                                <strong>未开售</strong>
                                            </td>
                                        </template>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </li>
                </ul>
            </Accordion>
        </div>
        <footer class="submitbtn">
            <p>
                <span class="lefticon" @click="clearall">
                    <icon name="ljx"></icon>
                    <b>清空</b>
                </span>
                <span class="rightinfo">
                    <strong>可选1场或两场{{count}}</strong>
                    <b>猜90分钟结果(含伤停补时，不含加时和点球)</b>
                </span>
            </p>
            <a class="btnsend" @click="sendsubmit" href="javascript:;">确定</a>
        </footer>
    </div>
</template>

<script>
    import Button from '../../components/Button.vue';
    import DomLoad from '../../components/DomLoad';
    import {ViewBox, XSwitch, Group, dateFormat} from 'vux';
    import Accordion from '../../components/Accordion.vue';
    import {getFootDateR, beforeSendVaildR, godPay} from '../../service/buy';
    import {getMytoken} from '../../service/common';
    import store2 from 'store2';
    import {clone, min} from 'ramda';
    export default {
        components: {Accordion},
        data() {
            return {
                listsdata: [],
                count: 0,
            };
        },
        filters: {
            setclass(val){
                if(val > 0) {
                    return 'red';
                }
                return 'blue';
            }
        },
        created() {
            this.getfootballdata();
        },
        computed: {},
        methods: {
            async getfootballdata(){
                const {data}= await getFootDateR();
                if(data && data.code === 0) {
                    //提取所有items顶级的item
                    let Items = [];
                    data.data.map(item=> {
                        Items = Items.concat(item.Item);
                    });
                    Items.map(item=> {
                        //胜负平操作
                        let sfpdata = [],
                                rsfpdata = [],
                                sfpobj = {},
                                tnums = [3, 1, 0],
                                sfpw = ['主胜', '平', '客胜'],
                                rsfqobj = {},
                                DGStatearr = item.DGState.split(','), nodata = ['未开售', '未开售', '未开售'], PSStatearr = item.PSState.split(',');
                        const timename = [item.HTeam, 'VS', item.VTeam];
                        item.rangqiu = item.SPRQS.split(',').slice(-1)[0];
                        item.SPSPF.split(',').map((e, i)=> {
                            sfpobj.name = sfpw[i];
                            sfpobj.value = e;
                            sfpobj.tname = timename[i];
                            sfpobj.tnum = tnums[i];
                            sfpobj.isdan = !!parseInt(DGStatearr[0]);
                            sfpdata.push(R.clone(sfpobj));
                        });
                        item['showdatawin'] = R.clone(sfpdata);
                        // 让球胜负平操作
                        item.SPRQS.split(',').map((e, i)=> {
                            rsfqobj.name = sfpw[i];
                            rsfqobj.value = e;
                            rsfqobj.tname = timename[i];
                            rsfqobj.tnum = tnums[i];
                            sfpobj.isdan = !!parseInt(DGStatearr[1]);
                            rsfpdata.push(R.clone(rsfqobj))
                        });
                        item['showdatawinone'] = R.clone(rsfpdata);
                    });
                    this.listsdata = data.data;
                    console.log(this.listsdata);
                }
            },
            tdclick(itemp, pindex, itemc, cindex, iteml, lindex){
                iteml.selected = !iteml.selected;
                const {games}=this.getbottominfoobj(this.listsdata);
                if(games.length > 2) {
                    this.$vux.toast.text('最多选择2场比赛');
                    iteml.selected = !iteml.selected;
                    return;
                }
                this.listsdata = clone(this.listsdata);
            },
            getbottominfoobj(dataSource){
                let games = [], content, isdan = false;
                dataSource && dataSource.map(ep=> {
                    ep.Item.map(item=> {
                        let win, winone;
                        if(item.showdatawin) {
                            win = item.showdatawin.some(e=>e.selected);
                        }
                        if(item.showdatawinone) {
                            winone = item.showdatawinone.some(e=>e.selected);
                        }
                        if(win || winone) {
                            games.push(clone(item));
                        }
                    });
                    if(games.length === 1) {
                        let win, winone, item = games[0], tempdanarr = games[0].DGState.split(',');
                        win = item.showdatawin ? (item.showdatawin.some(e=>e.selected) ? (item.showdatawin.some(e=>e.selected) === !!parseInt(tempdanarr[0])) : true ) : true;
                        winone = item.showdatawinone ? (item.showdatawinone.some(e=>e.selected) ? (item.showdatawinone.some(e=>e.selected) === !!parseInt(tempdanarr[1]) ) : true) : true;
                        if(win && winone) {
                            isdan = true;
                        }
                    }
                });
                content = games.length === 0 ? '请选择您的投注场比赛' : `已经选择<b>${games.length}</b>场比赛`;
                return {
                    games,
                    content,
                    isdan
                }
            },
            clearall(){
                this.$vux.confirm.show({
                    title: '提示',
                    content: '是否要清除所有',
                    onCancel () {

                    },
                    onConfirm: () => {
                        this.listsdata.map((p, f)=> {
                            p.Item.map((e, i)=> {
                                e.showdatawin.map((d, c)=> {
                                    d.selected = false;
                                });
                                e.showdatawinone.map((d, c)=> {
                                    d.selected = false;
                                })
                            })
                        })
                    }
                })
            },
            async sendsubmit(){
                const {games}=this.getbottominfoobj(this.listsdata);
                const {token}=await getMytoken();
                if(!token) {
                    this.$vux.toast.text('信息获取失败');
                }
                let senddata = {
                    "betContent": this.getSenddata(),
                    "lottery": "1",
                    "lotteryName": "竞彩足球",
                    "playType": 109
                };

                const {data}=await beforeSendVaildR(token, senddata);
                if(data && data.code === 0) {
                    store2('baydate', senddata);
                    this.$router.push('/buy/recommendconfig');
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            getSenddata(){
                const {games, isdan}=this.getbottominfoobj(this.listsdata);
                let Number = [], chuanstring = null;
                games.map((e, i)=> {
                    const {showdatawin, showdatawinone, IssueNo}=e;
                    let str = '', windata = '', winonedata = '', scoredata = '', bqcdata = '', ballsdata = '', arr = [];
                    windata = (showdatawin && showdatawin.some(e=>e.selected)) ? ('1_' + showdatawin.filter(e=>e.selected).map(e=>e.tnum).join('/')) : null;
                    winonedata = (showdatawinone && showdatawinone.some(e=>e.selected)) ? ('2_' + showdatawinone.filter(e=>e.selected).map(e=>e.tnum).join('/')) : null;
                    if(windata) {
                        arr.push(windata);
                    }
                    if(winonedata) {
                        arr.push(winonedata);
                    }
                    str = `${IssueNo}=${arr.join('^')}`;
                    Number.push(str);
                });
                if(games.length === 1 && isdan) {
                    chuanstring = '1*1';
                }
                else {
                    chuanstring = '2*1';
                }
                games.sort((a, b)=> {
                    new Date(a.BaseEndTime) - new Date(b.BaseEndTime)
                });
                store2('endtime', games[0].BaseEndTime);
                return `${Number.join(',')}|${chuanstring}`;
            }
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    @import "../app";

    .football {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        .container {
            display: flex;
            flex-direction: column;
            flex: 1;
            overflow: scroll;
        }
    }

    .itemhead {
        height: 68px;
        box-sizing: border-box;
        border-top: 1px solid @color12;
        border-bottom: 1px solid @color12;
        background: #fff;
        display: flex;
        align-items: center;
        font-size: @fz26;
        span {
            margin-left: 30px;
        }
        .fronticon {
            width: 111px;
            height: 66px;
        }
    }

    .listcon {
        li {
            height: 232px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            .dleft {
                width: 150px;
                font-size: 22px;
                color: @color2;
                span {
                    display: block;
                    text-align: center;
                }
            }
            .dright {
                .tabcon {
                    flex: 1;
                    display: flex;
                    table {
                        display: flex;
                        table-layout: fixed;
                        border-collapse: collapse;
                        tbody {
                            position: relative;
                        }
                        tr {
                            position: relative;
                            &.dan {
                                border: 4px solid @color22;
                                position: relative;
                            }
                        }
                        td {
                            background: #fff;
                            border: 1px solid @color12;
                            width: 180px;
                            height: 74px;
                            text-align: center;
                            &.selected {
                                background: @colororange;
                                color: #fff;
                                i {
                                    color: #fff;
                                }
                            }
                            strong {

                            }
                            i {
                                color: @color2;
                            }
                        }
                    }
                    .leftrang {
                        display: flex;
                        flex-direction: column;
                        b {
                            height: 50%;
                            box-sizing: border-box;
                            text-align: center;
                            background: @color12;
                            width: 29px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            font-size: @fz20;
                            &.red {
                                background: @color22;
                                color: #fff;
                            }
                            &.blue {
                                background: @color20;
                                color: #fff;
                            }
                        }
                    }
                }
                .toptitle {
                    display: flex;
                    justify-content: center;
                    flex: 1;
                    position: relative;
                    margin-bottom: 6px;
                    b {
                        position: absolute;
                        font-size: 40px;
                        transform: scale(0.5) translateY(-50%);
                        line-height: 1.2;
                        left: 0;
                        top: 0;
                        width: 10px;
                        color: @color3;
                    }
                    strong {
                        font-weight: bold;
                        font-size: @fz28;
                        i {
                            font-size: @fz24;
                            color: @color3;
                        }
                    }
                    em {
                        margin: 0 40px;
                    }
                }
            }
        }
    }

    .submitbtn {
        height: 100px;
        border-top: 1px solid @color12;
        background: #f6f6f6;
        display: flex;
        p {
            display: flex;
            flex: 1;
            .lefticon {
                width: 100px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                svg {
                    width: 60px;
                    height: 60px;
                    text-align: center;
                }
                b {
                    font-size: 20px;
                    text-align: center;
                    color: #8f9090;
                }
            }
            .rightinfo {
                display: flex;
                flex: 1;
                flex-direction: column;
                line-height: 1;
                justify-content: center;
                strong {
                    font-size: @fz28;
                    line-height: 1;
                    font-weight: bold;
                }
                b {
                    font-size: 40px;
                    transform: scale(0.5) translateX(-50%) translateY(10px);
                    line-height: 1;
                    width: 200%;
                }
            }
        }
        .btnsend {
            width: 218px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: @color22;
            color: #fff;
            font-size: @fz36;
        }
    }

</style>